<template>
	<view class="created">
		<nav-bar :title="'日常' + _typeName" leftArrow></nav-bar>

		<view class="created-header">发起{{ _typeName }}</view>

		<van-form class="created-form" @submit="onSubmit" label-width="200rpx">
			<van-cell-group inset>
				<van-field v-model="form.projectName" required is-link readonly colon name="picker" label="工程"
					placeholder="请选择工程" @click="selectShow.project = true"
					:rules="[{ required: true, message: '请选择工程' }]" />
				<van-field :label="_typeName + '原因'" v-model="form.repairReason" type="textarea" rows="4" required colon
					autosize show-word-limit maxlength="200" :rules="[{ required: true, message: `请输入${_typeName}原因` }]"
					:placeholder="`请输入${_typeName}原因`" />
				<van-field required colon name="checked" label="关联设备"
					placeholder="请选择关联设备" :rules="[{ required: true, message: '请选择关联设备' }]">
					<template #input>
						<picker-multiple :columns="devicesList" @confirm="onDeviceConfirm" />
					</template>
				</van-field>
				<van-field name="uploader" required colon :label="_typeName + '前照片'"
					:rules="[{ required: true, message: `请上传${_typeName}前照片` }]">
					<template #input>
						<upload-file accept="image/*" v-model="form.imageUrl"></upload-file>
					</template>
				</van-field>
				<van-field name="uploader" colon :label="_typeName + '前视频'">
					<template #input>
						<upload-file accept="video/*" v-model="form.videoUrl"></upload-file>
					</template>
				</van-field>
				<van-field label="计划完成时间" v-model="form.planFinishTime" required colon is-link readonly
					name="datePicker" placeholder="请选择计划完成时间" @click="selectShow.calendar = true"
					:rules="[{ required: true, message: '请选择计划完成时间' }]" />
				<van-field label="指派处理人员" v-model="form.assignedHandlerName" required is-link readonly colon
					placeholder="请选择处理人" @click="selectShow.user = true"
					:rules="[{ required: true, message: '请选择处理人' }]" />
				<van-field label="下达人" v-model="userInfo.name" colon readonly />
			</van-cell-group>

			<view class="created-footer">
				<van-button class="created-button-cancel" type="default" @click="routeBack">取消</van-button>
				<van-button class="created-button-submit" type="primary" native-type="submit">确认</van-button>
			</view>
		</van-form>

		<!-- 选择器 单选 工程 -->
		<picker-search v-model:show="selectShow.project" :columns="projectItemsList" @confirm="onProjectConfirm"
			@cancel="selectShow.project = false" />

		<!-- 选择器 时间 年月日时分秒 -->
		<picker-date-time v-model:show="selectShow.calendar" @confirm="onCalendarConfirm"></picker-date-time>

		<!-- 选择器 单选 指派人 -->
		<picker-search v-model:show="selectShow.user" :columns="userList" @confirm="onUserConfirm"
			@cancel="selectShow.user = false" />
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'

	import {
		ref,
		computed
	} from 'vue';

	import {
		apiProjectItemsList,
		apiTypesList,
		apiDevicesList,
		apiUsersList,
	} from '@/api/common';

	import {
		apiDailyRepairSave
	} from '@/api/dailyFix';

	import {
		projects,
		sources,
		devices
	} from '@/local/common';

	import store from '@/store'

	const path = defineProps({
		type: String, // 1维修 2养护
	});

	const _typeName = computed(() => {
		const typeMap = {
			'1': '维修',
			'2': '养护',
		};
		window.document.title = '日常' + (typeMap[path.type] || '');
		return typeMap[path.type] || '';
	});

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const form = ref({
		type: path.type,
		relatedEquipment: [],
		imageUrl: [],
		videoUrl: [],
	});

	const selectShow = ref({
		project: false,
		user: false,
		calendar: false,
	});

	// 工程列表
	const projectItemsList = ref([]);
	const getProjectItemsList = () => {
		apiProjectItemsList().then(res => {
			projectItemsList.value = res.map(n => ({
				text: n.name,
				value: n.projectItemId
			}));
		})
	}
	const onProjectConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		form.value.projectId = selectedOptions[0].value;
		form.value.projectName = selectedOptions[0].text;
		selectShow.value.project = false;

		getDevicesList();
	}

	// 设备列表 关联设备
	const devicesList = ref([]);
	const getDevicesList = () => {
		devicesList.value = [];
		form.value.relatedEquipment = [];

		if (!form.value.projectId) {
			return;
		}

		apiDevicesList({
			projectItemId: form.value.projectId,
			// deviceType: ''
		}).then(res => {
			devicesList.value = res.map(n => ({
				name: n.deviceName,
				value: n.deviceItemId,
				text: `${n.deviceName}-${n.sensorNo || ''}`,
			}));
		})
	}
	const onDeviceConfirm = (list) => {
		form.value.relatedEquipment = list.map(e => ({
			id: e.value,
			name: e.name,
		}));
	}

	// 系统用户列表
	const userList = ref([]);
	const getUserList = () => {
		apiUsersList({
			pageNum: 1,
			pageSize: 9999,
		}).then(res => {
			userList.value = res.records.map(n => ({
				text: n.name,
				value: n.userId
			}));
		})
	}
	// 确认 处理人
	const onUserConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		form.value.assignedHandler = selectedOptions[0]?.value;
		form.value.assignedHandlerName = selectedOptions[0]?.text;
		selectShow.value.user = false;
	}

	// 确认 时间 计划完成时间
	const onCalendarConfirm = (value) => {
		form.value.planFinishTime = value;
		selectShow.value.calendar = false;
	}

	const onSubmit = () => {
		const param = {
			...form.value,
			fileUrl: [...form.value.imageUrl, ...(form.value.videoUrl || [])],
			assigner: Number(userInfo.userId),
		}
		apiDailyRepairSave(param).then(res => {
			uni.navigateTo({
				url: `/pages/dailyFix/index?type=${path.type}`
			});
		})
	};

	const routeBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	getProjectItemsList();
	// getDevicesList();
	getUserList();
</script>

<style lang="scss" scoped>
	@import '@/assets/form.scss';

	.created {
		&-header {
			height: 100rpx;
			line-height: 100rpx;
			text-indent: 30rpx;
			color: #333;
		}

		&-form {
			padding-bottom: 20rpx;
		}

		&-footer {
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: flex;
			gap: 30rpx;
		}

		&-button {
			&-submit {
				flex: 1;
			}

			&-cancel {
				width: 140rpx;
			}
		}
	}
</style>